<script setup lang="ts">
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { Icon, Image, Input, Scroll } from '@xcan-angus/vue-ui';
import { useGroupData } from './composables/useGroupData';

const { t } = useI18n();

/**
 * Props interface for GroupSet component
 */
interface Props {
  type: 'user' | 'dept' | 'group';
  loaded: boolean;
  visible: boolean;
  checkedId?: string;
  appId?: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'user',
  loaded: false,
  visible: false,
  checkedId: undefined,
  appId: undefined
});

const emit = defineEmits<{
  (e: 'update:checkedId', id: string | undefined): void;
  (e: 'update:loaded', value:boolean): void;
}>();

// Use composable for group data management
const {
  dataSource,
  inputValue,
  activeId,
  notify,
  nameKey,
  idKey,
  placeholder,
  apiPath,
  params,
  handleScrollChange,
  handleChecked,
  handleInputChange,
  init,
  reset
} = useGroupData(props.appId, props.type);

// Initialize the composable
init();

// Watch for visibility changes
watch(() => props.visible, (newValue) => {
  if (!newValue) {
    return;
  }

  reset();
}, { immediate: true });

// Watch for activeId changes and emit update
watch(activeId, (newId) => {
  emit('update:checkedId', newId);
});

// Watch for loaded changes and emit update
watch([() => props.loaded, () => dataSource.value], ([newLoaded]) => {
  if (!newLoaded && dataSource.value.length > 0) {
    const id = dataSource.value[0]?.id;
    activeId.value = id;
    emit('update:checkedId', id);
    emit('update:loaded', true);
  }
}, {
  immediate: true
});
</script>
<template>
  <div class="h-full text-3 text-theme-title">
    <Input
      :value="inputValue"
      :allowClear="true"
      :placeholder="placeholder"
      size="small"
      class="mb-2"
      @change="handleInputChange" />
    <Scroll
      :lineHeight="44"
      :params="params"
      :action="apiPath"
      :notify="notify"
      style="height: calc(100% - 36px);"
      @change="handleScrollChange">
      <div
        v-for="item in dataSource"
        :key="item[idKey]"
        :class="{ 'active-item': activeId === item[idKey] }"
        class="flex items-center justify-between h-11 py-1.5 px-3 rounded cursor-pointer hover:bg-gray-hover"
        @click.stop="handleChecked(item[idKey])">
        <div class="flex items-center flex-nowrap">
          <Icon
            v-if="type === 'group'"
            class="mr-3 text-7"
            icon="icon-zu" />
          <Icon
            v-else-if="type === 'dept'"
            class="mr-3 text-7"
            icon="icon-bumen" />
          <Image
            v-else
            class="w-7 h-7 rounded-2xl mr-3"
            type="avatar"
            :src="item.avatar" />
          <span :title="item[nameKey]" class="leading-5 truncate">{{ item[nameKey] }}</span>
        </div>
      </div>
    </Scroll>
  </div>
</template>
<style scoped>
.active-item {
  background-color: rgba(239, 240, 243, 100%);
  color: #1890ff;
}
</style>
